<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax原生用法</title>
  </head>
  <body>
    <script>
      // XMLHttpRequest 它是js内置对象，主要用于发送ajax请求。
      // 1. 实例化xhr对象：发送请求
      var xhr = null;
      if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // 主流浏览器的写法
      else if (window.ActiveXObject) xhr = new ActiveXObject(); // ie低版本浏览器的写法
      //4.监听xhr请求状态的变化，接收请求的数据，只要状态变化，就会触发onreadystatechange函数，这个监听一定要写在open的上方，否则该函数失效。
      // 0 1 2 3 4(表示请求成功)
      xhr.onreadystatechange = () => {
        if (xhr.status == 200 && xhr.readyState == 4) {
          console.log(xhr.responseText);
        }
      };

      // 2. 配置请求方式和url接口地址
      xhr.open(
        "GET",
        "https://apif.java.crmeb.net/api/front/index/product/1?page=1&limit=6"
      );

      // 3. 发送请求
      xhr.send();

      // 面试点：
      // 1. xhr.readyState每个状态的含义;
      // 2. 描述原生ajax请求的基本流程；
    </script>
  </body>
</html>
